<template>
  <div class="accept-plan">
    <div class="left">
      <!--     start base-info-->
      <div class="base-info" v-loading="isDetailLoading">
        <div class="title">客户信息</div>
        <div class="info">
          <div class="info-item">
            <div class="name">客户名称：</div>
            <div class="val">{{ customerInfo.customerName }}</div>
          </div>
          <div class="info-item">
            <div class="name">项目地址：</div>
            <div class="val">{{ customerInfo.address }}</div>
          </div>
          <div class="info-item">
            <div class="name">面积：</div>
            <div class="val" v-if="customerInfo.area">{{ customerInfo.area }}㎡</div>
          </div>
        </div>
      </div>
      <!--    end base-info-->
      <!--     start base-info-->
      <div class="base-info" v-loading="isTeamLoading">
        <div class="title">工作人员</div>
        <div class="info">
          <div class="info-item" v-for="item in serviceData">
            <div class="name">{{ item.roleName }}：</div>
            <div class="val">{{ item.userName }}</div>
          </div>
        </div>
      </div>
      <!--    end base-info-->
    </div>
    <div class="right">
      <AddForm
        :planData="planData"
        :customerId="props.customerId"
        @on-confrim="getPlanList"
        v-if="currentType === acceptancePlanType.ACCEPTANCE_TEMPLATE"
      ></AddForm>
      <ConfigList :customerId="props.customerId" v-if="currentType === acceptancePlanType.ACCEPTANCE"></ConfigList>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import AddForm from "./components/AddForm.vue";
import ConfigList from "./components/ConfigList.vue";
import { getAcceptanceList, getServiceTeam, clientInfoAndFollow } from "@/apis/clientManager";
import { acceptancePlanType } from "../../config";

const props = defineProps({
  customerId: {
    type: String,
    default: ""
  }
});

const isDetailLoading = ref(false);
const isTeamLoading = ref(false);
const customerInfo = ref({});
const serviceData = ref([]);
const getServiceTeamData = async () => {
  try {
    isTeamLoading.value = true;
    const { data } = await getServiceTeam(props.customerId);
    serviceData.value = data || [];
    isTeamLoading.value = false;
  } catch (err) {
    isTeamLoading.value = false;
  }
};
const getClientInfoAndFollow = async () => {
  try {
    isDetailLoading.value = true;
    const { data } = await clientInfoAndFollow(props.customerId);
    customerInfo.value = data || {};
    isDetailLoading.value = false;
  } catch (err) {
    isDetailLoading.value = false;
  }
};

const planData = ref([]);
const currentType = ref(null);
const setDefaultSelection = list => {
  list?.forEach(item => {
    item.children?.forEach(child => {
      const defaultChild = child.children?.find(grandChild => grandChild.isDefault === 1);
      if (defaultChild) {
        child.selectedVal = defaultChild.standardId;
      }
    });
  });
};
const getPlanList = async () => {
  try {
    const { data } = await getAcceptanceList(props.customerId);
    currentType.value = data?.type ?? 1;
    if (currentType.value === acceptancePlanType.ACCEPTANCE_TEMPLATE) {
      let treeSelectList = data?.treeSelectList ?? [];
      // if (treeSelectList.length > 0) {
      //   treeSelectList.map(item => {
      //     if (item.children && item.children.length > 0) {
      //       item.children.map(item2 => {
      //         if (item2.children && item2.children.length > 0) {
      //           item2.children.map(item3 => {
      //             if (item3.isDefault == 1) {
      //               item2.selectedVal = item3.standardId;
      //             }
      //           });
      //         }
      //       });
      //     }
      //   });
      // }
      setDefaultSelection(treeSelectList);
      planData.value = treeSelectList;
    }
  } catch (err) {}
};

getClientInfoAndFollow();
getServiceTeamData();
getPlanList();
</script>
<style scoped lang="scss">
@use "acceptancePlan";
</style>
